<template>
    <div class="register">
        <div class="account"><span></span><input type="text" v-model.trim="user" placeholder="请输入用户名" /></div>
        <div class="account"><span></span><input type="text" v-model.trim="account" placeholder="请输入账号" /></div>
        <div class="passsword"><span></span><input type="password" v-model.trim="passsword" placeholder="请输入密码" /></div>
        <button @click="register" class="button">注册</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: "",
            account: "",
            passsword: "",
        };
    },
    methods: {
        register() {
            if (this.user.length !== 0 || this.account.length !== 0 || this.passsword.length !== 0) {
                if (this.account.length < 10 || this.account.length > 10) {
                    this.$toast("账号长度为10位");
                    return;
                }
                if (this.passsword.length < 6 || this.passsword.length > 16) {
                    this.$toast("密码长度为6~16位");
                    return;
                }

                if (localStorage.getItem("user") == null) {
                    console.log(1);
                    let arr = [];
                    arr.push({ user: this.user, account: this.account, passsword: this.passsword });
                    localStorage.setItem("user", JSON.stringify(arr));
                    this.$toast("注册成功");
                    this.user = "";
                    this.account = "";
                    this.passsword = "";
                } else {
                    let arrT = JSON.parse(localStorage.getItem("user"));
                    for (let i = 0; i < arrT.length; i++) {
                        if (arrT[i].user == this.user) {
                            this.$toast("用户名已被注册");
                            return;
                        }
                    }
                    arrT.push({ user: this.user, account: this.account, passsword: this.passsword });
                    localStorage.setItem("user", JSON.stringify(arrT));
                    // console.log(this.user);
                    // console.log(this.account);
                    // console.log(this.passsword);
                    this.$toast("注册成功");
                    this.user = "";
                    this.account = "";
                    this.passsword = "";
                    this.$router.push({ path: "/login/islogin" });
                }
            } else {
                this.$toast("内容不能为空");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.register {
    .passsword {
        margin-top: 0.625rem;
        box-sizing: border-box;
        height: 50px;
        width: 100%;
        background-color: rgb(243, 243, 243, 0.5);
        border-radius: 2rem;
        padding-left: 20px;
        display: flex;
        align-items: center;
    }
    .account {
        margin-top: 0.625rem;
        height: 50px;
        width: 100%;
        background-color: rgb(243, 243, 243, 0.5);
        border-radius: 2rem;
        box-sizing: border-box;
        padding-left: 20px;
        display: flex;
        align-items: center;
    }
    input {
        caret-color: #727272;
        color: #727272;
        background-color: transparent;
        border: none;
        outline: none;
        font-size: 0.9375rem;
        height: 1.875rem;
        width: 15.375rem;
        padding-left: 0.625rem;
    }
    input::-webkit-input-placeholder {
        color: #aab2bd;
        font-size: 0.875rem;
    }

    button {
        background: linear-gradient(8deg, rgb(255 196 190 / 90%), rgb(255 116 100 / 60%));
        border: none;
        outline: none;
        margin-top: 1.875rem;
        width: 100%;
        height: 50px;
        border-radius: 2rem;
    }
    .button {
        width: 100%;
        color: rgb(255, 255, 255);
    }
}
</style>
